<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

<!-- start: Meta -->
<meta charset="utf-8">
<title>PinWall by creativeLabs</title> 
<meta name="description" content="PinWall Theme"/>
<meta name="keywords" content="Template, Theme, web, html5, css3" />
<meta name="author" content="Łukasz Holeczek from creativeLabs"/>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1"/>
<!-- end: Meta -->

<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- end: Mobile Specific -->

<!-- start: Facebook Open Graph -->
<meta property="og:title" content=""/>
<meta property="og:description" content=""/>
<meta property="og:type" content=""/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
<!-- end: Facebook Open Graph -->

<!-- start: CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/colors/yellow.css" id="colors">
<link rel="stylesheet" type="text/css" href="css/social_icons.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Boogaloo">
<!-- end: CSS -->

<!-- start: Java Script -->
<script src="../../../ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/fancybox.js"></script>
<script src="js/carousel.js"></script>
<script src="js/flexslider.js"></script>
<script src="js/selectnav.js"></script>
<script src="js/twitter.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/effects.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/jquery.gmap.min.js"></script>
<script defer="defer" src="js/isotope.js"></script>
<script defer="defer" src="js/template_functions.js"></script>
<!-- end: Java Script -->

</head>
<body>

<!-- start: Header -->
<div id="header">
	
	<!-- start: Container -->
	<div class="container">

		<!-- start: Logo -->
		<div class="one-third column">
			<div id="logo">
				<a href="#"><img src="images/logo.png" alt="logo" /></a>
			</div>
		</div>
		<!-- end: Logo -->

		<!-- start: Social Links -->
		<div class="two-thirds column">
			<div id="social-links">
				<ul class="social-bookmarks">
					<li class="deviantart"><a href="#">deviantart</a></li>
					<li class="dribbble"><a href="#">dribbble</a></li>
					<li class="facebook"><a href="#">facebook</a></li>
					<li class="flickr"><a href="#">flickr</a></li>
					<li class="github"><a href="#">github</a></li>
					<li class="pinterest"><a href="#">pinterest</a></li>
					<li class="twitter"><a href="#">twitter</a></li>
					<li class="vimeo"><a href="#">vimeo</a></li>
					<li class="youtube"><a href="#">youtube</a></li>
				</ul>
				<div id="search">
					<input class="search-form" name="search-form" />
				</div>
			</div>	
		</div>
		<!-- end: Social Links -->

	</div>
	<!-- end: Container -->

</div>
<!-- end: Header -->

<!-- start: Navigation Wrapper -->
<div id="navigation-wrapper">
	
	<!-- start: Contact -->
	<div id="contact">
		
		<!-- start: Map -->
		<div class="sixteen columns google-map">
			
			<!-- start: Close Contacts Button -->
			<a href="#" id="close-contact">Close</a>
			<!-- end: Close Contacts Button -->
			
			<!-- starts: Google Maps -->
			<div id="googlemaps" class="google-map google-map-full" style="height:250px; margin-bottom: 20px"></div>
			<!-- end: Google Maps -->
			
		</div>
		<!-- end: Map -->	
		
		<!-- start: Container -->
		<div class="container">
			
			<div class="four columns">
				<!-- start: Company Name -->
				<div id="contact-information">
					<h2>Creative Labs</h2>
					<p>---</p>
					<p>M: +48 123 456 789</p>
					<p>P: +48 32 123 45 67</p>
					<p>@: mail@post.com</p>
					
				</div>
				<!-- end: Company Name -->
			</div>	
			
			<div class="twelve columns">
			<!-- start: Contact Form -->
			<div id="contact-form">
				<form method="post" action="http://holeczek.pl/webdevelopment/pinwall/contact.php">
					<div class="contact-form-left">
						<div class="field">
							<label>Name:</label>
							<input type="text" name="name" class="text" />
						</div>

						<div class="field">
							<label>Email: <span>*</span></label>
							<input type="text" name="email" class="text" />
						</div>
						<div class="field">
							<input type="button" id="send" value="Send Message"/>
							<div class="loading"></div>
						</div>
					</div>
					<div class="contact-form-right">	
						<div class="field">
							<label>Message: <span>*</span></label>
							<textarea name="message" class="text textarea" ></textarea>
						</div>
					</div>	
				</form>
			</div>
			<!-- end: Contact Form -->
			</div>
				
		</div>
		<!-- end: Container -->	
	
	</div>	
	<!-- end: Contact -->
	
	<!-- start: Contact Fake -->
	<div id="contact-fake">
		
		
	</div>
	<!-- end: Contact Fake -->	
				
	<!-- start: Container -->
	<div class="container">
		
		<div id="logo-small"></div>
		<!-- start: Navigation -->
		<div id="navigation">
			<ul id="nav">

				<li><a href="index-2.html">Start</a></li>
				
				<li><a href="#">Categories</a>
					<ul>
					<li><a href="videos.html">Videos</a></li>
					<li><a href="pictures.html">Pictures</a></li>
					<li><a href="quotes.html">Quotes</a></li>
					<li><a href="projects.html">Projects</a></li>
					</ul>
				</li>

				<li><a href="#">How it works</a>
					<ul>
					<li><a href="shortcodes.html">Shortcodes</a></li>	
					<li><a href="full_width.html">Full Width</a></li>
					<li><a href="sidebar.html">Sidebar</a></li>
					<li><a href="post.html">Single Post</a></li>
					<li><a href="about.html">About Us</a></li>
					<li><a href="pricing_tables.html">Pricing Tables</a></li>
					</ul>
				</li>

				<li><a href="about.html">About</a></li>
				<li><a class="contact-toggle" href="contact.html">Contact</a></li>

			</ul>

		</div>
		<!-- end: Navigation --> 
		<div class="clear"></div>

	</div>
	<!-- end: Container -->

</div>
<!-- end: Navigation Wrapper--> 
	
<!-- start: Wrapper -->
<div id="wrapper">

<!-- start: Container -->	
<div class="container">
	
	<!-- start: Portfolio -->
	<div id="portfolio-wrapper">
		
		<div class="one-third column portfolio-item">
			<div class="quotes">
				<div class="quote">
				“That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works”
				</div>
				<div class="author">
					- Steve Jobs -
				</div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="project.html" title="Title"><img src="images/photo5.jpg" alt=""/><div class="image-overlay-link"></div></a>
				<div class="item-description alt">
					<h5><a href="project.html">Project no. 5</a></h5>
					<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
					</p>
				</div>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="quotes">
				<div class="quote">
				“In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.”
				</div>
				<div class="author">
					- Steve Jobs -
				</div>	
			</div>
		</div>
			
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="project.html" title="Title"><img src="images/photo1.jpg" alt=""/><div class="image-overlay-link"></div></a>
				<div class="item-description alt">
					<h5><a href="project.html">Project no. 1</a></h5>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
					</p>
				</div>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>
			</div>	
		</div>
				
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="images/photo9.jpg" rel="image" title="Title"><img src="images/photo9.jpg" alt=""/><div class="image-overlay-zoom"></div></a>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>
			</div>
		</div>
				
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="images/photo2.jpg"title="Title"><img src="images/photo2.jpg" alt=""/><div class="image-overlay-zoom"></div></a>
			<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="project.html" title="Title">
				<img src="images/photo3.jpg" alt=""/>
				<div class="image-overlay-link"></div></a>
					<div class="item-description alt">
						<h5><a href="project.html">Project no. 3</a></h5>
						<p>
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
					</p>
				</div>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="images/photo4.jpg" rel="image" title="Title"><img src="images/photo4.jpg" alt=""/><div class="image-overlay-zoom"></div></a>
			<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="video embed">
				<iframe src="http://player.vimeo.com/video/3538565?portrait=0&amp;color=ffffff" width="480" height="256" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="project.html" title="Title"><img src="images/photo6.jpg" alt=""/><div class="image-overlay-link"></div></a>
				<div class="item-description alt">
					<h5><a href="project.html">Project no. 6</a></h5>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
					</p>
				</div>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="images/photo7.jpg" rel="image" title="Title"><img src="images/photo7.jpg" alt=""/><div class="image-overlay-zoom"></div></a>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="project.html" title="Title"><img src="images/photo8.jpg" alt=""/><div class="image-overlay-link"></div></a>
				<div class="item-description alt">
					<h5><a href="project.html">Project no. 8</a></h5>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
					</p>
				</div>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item scenery">
			<div class="quotes">
				<div class="quote">
					“Innovation distinguishes between a leader and a follower.”	
				</div>
				<div class="author">
					- Steve Jobs -
				</div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="quotes">
				<div class="quote">
				“Visual design is often the polar opposite of engineering: trading hard edges for subjective decisions based on gut feelings and personal experiences. It’s messy, unpredictable, and notoriously hard to measure. The apparently erratic behavior of artists drives engineers bananas. Their decisions seem arbitrary and risk everything with no guaranteed benefit.”
				</div>
				<div class="author">
					- Scott Stevenson -
				</div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="project.html" title="Title"><img src="images/photo10.jpg" alt=""/><div class="image-overlay-link"></div></a>
				<div class="item-description alt">
					<h5><a href="project.html">Project no. 10</a></h5>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
					</p>
				</div>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="project.html" title="Title"><img src="images/photo11.jpg" alt=""/><div class="image-overlay-link"></div></a>
				<div class="item-description alt">
					<h5><a href="project.html">Project no. 11</a></h5>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
					</p>
				</div>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>	
			</div>
		</div>
		
		<div class="one-third column portfolio-item">
			<div class="picture"><a href="images/photo12.jpg" rel="image" title="Title"><img src="images/photo12.jpg" alt=""/><div class="image-overlay-zoom"></div></a>
				<div class="post-meta"><span><i class="mini-ico-calendar"></i>1 June 2011</span> <span><i class="mini-ico-user"></i> <a href="#">lucas</a></span> <span><i class="mini-ico-comment"></i><a href="#">89 comments</a></span></div>
			</div>
		</div>
					
	</div>
	<!-- end: Portfolio -->
		
</div>
<!-- end: Container -->

</div>
<!-- end: Wrapper -->

<!-- start: Footer -->
<div id="footer">
	<!-- start: Container -->
	<div class="container">
	
		<!-- start: About -->
		<div class="one-third column">
			<h3>About Us</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
		<!-- end: About -->
		
		
		<!-- start: Photo Stream -->
		<div class="one-third column">
			<h3>Photo Stream</h3>
			<div class="flickr-widget">
				<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=29609591@N08"></script>
				<div class="clear"></div>
			</div>
		</div>
		<!-- end: Photo Stream -->
		
		<!-- start: Latest Tweets -->
		<div class="one-third column">
			<h3>Latest Tweets</h3>
			<ul id="twitter"></ul>
				<script type="text/javascript">
					jQuery(document).ready(function($){
					$.getJSON('http://api.twitter.com/1/statuses/user_timeline/envato.json?count=3&amp;callback=?', function(tweets){
					$("#twitter").html(tz_format_twitter(tweets));
					}); });
				</script>
			<div class="clear"></div>
		</div>
		<!-- end: Latest Tweets -->
		
	</div>
	<!-- end: Container  -->

</div>
<!-- end: Footer -->

<!-- start: Under Footer -->
<div id="under-footer">
	
	<!-- start: Container -->
	<div class="container">
				
		<div id="under-footer-text">
			<div class="sixteen columns">
				<h2>we really love beautiful design</h2>	
			</div>
		</div>
		
		<div id="under-footer-copyright">
			<div class="sixteen columns">
				<p>© Copyright 2012 by <a href="#">creativeLabs</a>. All rights reserved.</p>		
			</div>
		</div>
		
		<div id="under-footer-logo">
			<div class="sixteen columns">
				<a href="#"><img src="images/logo-small.png" alt="logo" /></a>
			</div>
		</div>	

	</div>
	<!-- end: Container  -->

</div>
<!-- end: Under Footer -->

</body>
</html>